<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Statoscope dev sandbox</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
      border: none;
      -webkit-text-size-adjust: 100%;
    }

    .discovery {
      height: 100vh;
    }

    .drop-zone {
      cursor: pointer;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      top: 20vh;
      bottom: 20vh;
      left: 20vh;
      right: 20vh;
      border-radius: 10px;
      font: 2em Helvetica, sans-serif;
    }

    .drop-zone.awaiting {
      border: 5px dashed gray;
    }

    .progress-container {
      font-size: 0.5em;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .file-input {
      display: none;
    }
  </style>
</head>
<body>
<input class="file-input" type="file"/>
<div class="drop-zone awaiting">
  <div class="text">
    Drop stats right here 👇
  </div>
  <div class="progress-container"></div>
</div>

<script>
  /** @type {typeof DiscoverJS.ProgressBar} */
  const ProgressBar = Statoscope.Discovery.utils.progressbar;
  const dropZone = document.querySelector(".drop-zone");
  const dropZoneText = document.querySelector(".drop-zone .text");
  const progressContainer = document.querySelector(".progress-container");
  const fileInput = document.querySelector(".file-input");

  function setError(e, filename) {
    dropZoneText.innerHTML = `<pre>Error\n${[filename, e.message, e.stack].map(Boolean).join("\n")}</pre>`;
  }

  function startLoading() {
    dropZone.classList.remove("awaiting");
    dropZoneText.innerHTML = "";
  }

  function successLoading() {
    document.removeEventListener("dragover", onDragOver);
    document.removeEventListener("drop", onDrop);
    dropZone.remove();
  }

  function makeProgressBar() {
    const progressbar = new ProgressBar({});
    makeProgressBar.set.add(progressbar);
    return progressbar;
  }

  function destroyProgressBars() {
    for (const progressbar of makeProgressBar.set) {
      progressbar.el.remove();
    }
  }

  async function loadFiles(files) {
    if (files.length) {
      startLoading();
      const rawData = [];

      dropZoneText.textContent = "";

      await Promise.all([...files].map(async file => {
        const progressbar = makeProgressBar();

        progressContainer.append(progressbar.el);

        const loader = Statoscope.Discovery.utils.loadDataFromFile(file, {});
        try {
          await Statoscope.Discovery.utils.syncLoaderWithProgressbar(loader, progressbar);
          const loadResult = await loader.result;
          rawData.push({
            name: file.name,
            data: loadResult.data
          });
        } catch (e) {
          setError(e, file.name);
          throw e;
        }
      })).finally(destroyProgressBars);

      try {
        console.log(Statoscope.default(rawData));
        successLoading();
      } catch (e) {
        setError(e);
      }
    }
  }

  makeProgressBar.set = new Set();

  const onDragOver = (e) => {
    e.preventDefault();
  };

  const onDrop = (e) => {
    e.preventDefault();

    loadFiles(e.dataTransfer.files);
  };

  document.addEventListener("dragover", onDragOver);
  document.addEventListener("drop", onDrop);
  dropZone.addEventListener('click', () => fileInput.click());
  fileInput.addEventListener('change', () => loadFiles(fileInput.files))
</script>
</body>
</html>
